<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列排序</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />
</head>

<body>
  <h1>列排序</h1>
  <p>你可以通过双击标题，使用上下文菜单或javascript排序你的javascript表如下:</p>

  <div id="spreadsheet"></div>

  <div>
    <select id='columnNumber'>
      <option value='0'>Column 1</option>
      <option value='1'>Column 2</option>
      <option value='2'>Column 3</option>
      <option value='3'>Column 4</option>
    </select>
    <input type='button' value='Sort column' onclick="table.orderBy(document.getElementById('columnNumber').value)">
  </div>

  <h3>禁用表排序</h3>
  <p>排序是本地启用的特性。要禁用该特性，请在初始化中使用columnSorting:false指令。</p>
  <div id="spreadsheet2"></div>
</body>

<script>
  var data = [
    ['Mazda', 2001, 2000, '2006-01-01'],
    ['Pegeout', 2010, 5000, '2005-01-01'],
    ['Honda Fit', 2009, 3000, '2004-01-01'],
    ['Honda CRV', 2010, 6000, '2003-01-01'],
  ];

  var table = jspreadsheet(document.getElementById('spreadsheet'), {
    data: data,
    columns: [
      { type: 'text', width: 300 },
      { type: 'text', width: 80 },
      { type: 'text', width: 100 },
      { type: 'calendar', width: 100 },
    ]
  });

  // 禁用表排序
  var data2 = [
    ['Mazda', 2001, 2000, '2006-01-01'],
    ['Pegeout', 2010, 5000, '2005-01-01'],
    ['Honda Fit', 2009, 3000, '2004-01-01'],
    ['Honda CRV', 2010, 6000, '2003-01-01'],
  ];

  jspreadsheet(document.getElementById('spreadsheet2'), {
    data: data2,
    columns: [
      { type: 'text', tile: 'Model', width: 300 },
      { type: 'text', tile: 'Year', width: 100 },
      { type: 'text', tile: 'Price', width: 100 },
      { type: 'text', tile: 'Date', width: 100 },
    ],
    columnSorting: false,
  });
</script>

</html>